<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />

    <title>首页-Zuo-biying</title>
</head>

<body>
    <!-- 头部区域 -->

    <head>
        <div class="top">
            <div class="my">
                <a class="name" href="../index/leap.html">
                    <span class="big">z</span><span class="middle">uo</span> <span class="line">-</span>
                    <span class="little">biying</span>

                </a>
                <span class="img"></span>
                <span class="motto">
                    左必应的世界
                </span>
            </div>

            <div class="body" style="position: relative;">
                <div class="tab">
                    <ul>
                        <li>
                            <span><a href="./index/edit.html">写文</a></span>
                            <span><a href="./index/edit.html">Edit</a></span>
                        </li>
                        <li>
                            <span><a href="javascript:;">性格</a></span>
                            <span><a href="javascript:;">Character</a></span>
                        </li>
                        <li>
                            <span><a href="javascript:;">爱好</a></span>
                            <span><a href="javascript:;">Habit</a></span>
                        </li>
                        <li>
                            <span><a href="javascript:;">梦想</a></span>
                            <span><a href="javascript:;">Dream</a></span>
                        </li>
                        <li>
                            <span><a href=".javascript:;">日常</a></span>
                            <span><a href="javascript:;">Daily</a></span>
                        </li>
                        <li>
                            <span><a href="javascript:;">留言板</a></span>
                            <span><a href="javascript:;">Message</a></span>
                        </li>
                    </ul>
                </div>
                <div class="login">
                    <span>访客你好</span>
                    <span>
                        去<a href="javascript:;">登录</a>
                    </span>
                </div>
                <div class="logo">
                    <span href="javascript:;"></span>
                </div>

            </div>
            <div class="music">
                <span class="word2">多幸运-vk</span>
                <audio src="./music/Vk.mp3" controls="controls" preload="preload"></audio>
            </div>

        </div>
        <script>

            var logo = document.querySelector('.logo');
            var music = document.querySelector('.music');
            var audio = document.querySelector('audio');
            audio.volume = 0.1;
            var k = 1;
            logo.onclick = function () {
                if (k) {
                    music.style.display = 'block';
                    audio.play();
                    // audio.addTextTrack('1');
                    k = 0;
                } else {
                    music.style.display = 'none';
                    k = 1;
                    audio.pause();
                }

            }
        </script>
    </head>
    <!-- 头部end -->

    <!-- 主体部分 -->
    <main>
        <!-- 更新部分 -->
        <div class="update">
            <div class="body">
                <div class="head">
                    <span class="logo"></span>
                    <span class="word">最近更新</span>
                    <span class="English">welcome to Zuo-biying</span>
                    <span class="line"></span>
                </div>
                <div class="carousel">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fashion">
            <div class="body">
                <div class="head">
                    <span class="logo"></span>
                    <span class="word">时尚资讯</span>
                    <span class="English">an attitude towards life</span>
                    <span class="line"></span>
                </div>
                <div class="ootd">
                    <div class="tab">
                        <div class="title word3">
                            <span>每周好物</span>
                            <span>喜欢就好</span>
                        </div>
                        <div class="tab-nav">
                            <ul>
                                <li class="current">衣服</li>
                                <li>鞋子</li>
                                <li>包包</li>
                                <li>饰品</li>
                                <li>理念</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="article">
            <div class="body">
                <div class="head">
                    <span class="logo"></span>
                    <span class="word">近期写文</span>
                    <span class="English">the article comes from reality</span>
                    <span class="line"></span>
                </div>
                <div class="art-update">
                    <!-- 套娃 -->
                    <!-- 其实是这里面有两个盒子，main是左边的，side是右边的 -->
                    <div class="main">
                        <!-- 这个盒子里又有两个盒子，top是顶部那个介绍栏 -->
                        <div class="m-top">
                            <!-- 这里又有两个盒子，一个是左边的字，一个是右边的更多 -->
                            <div class="title">
                                <span class="word3">近期更新文章</span>
                                <span class="word">Update in few days</span>
                            </div>
                            <a href="javascript:;" class="more word2">更多</a>
                        </div>
                        <div class="content">
                            <ul>
                                <li>

                                </li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 右边的盒子 -->
                    <div class="side">
                        <div class="classify">
                            <div class="m-top">
                                <!-- 左边的字 -->
                                <div class="title">
                                    <span class="word3">文章归档</span>
                                    <span class="word">Article Archiving</span>
                                </div>

                            </div>
                            <div class="classify-li">
                                <ul>
                                    <li>
                                        <!-- 这里使用的是锚点跳转 -->
                                        <a href="./index/edit.html#year22-08">
                                            <span class="word2">2022年08月</span>
                                            <span class="word">10</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="new-message">
                            <div class="m-top">
                                <!-- 左边的字 -->
                                <div class="title">
                                    <span class="word3">最新留言</span>
                                    <span class="word">New Message</span>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 主体end -->
</body>

</html>